<template>
  <div class="containerWrap">
    <el-row class="commonHeader">
      <div>全国探针纳管分布</div>
      <Navigation style="top:1vh"/>
    </el-row>
    <el-row style="padding: 0 14px">
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <SecondLeft/>
        </el-col>
        <el-col :span="8">
          <SecondMiddle :data-list="dataList"/>
        </el-col>
        <el-col :span="4" style="height: 100%">
          <SecondRightTop
            :chart-data-top="chartDataTop"
            :total="total"
            :is-total-b="isTotalB"
          />
          <SecondRightBottom
            :chart-data-bottom="chartDataBottom"
            :online="online"
            :is-online-b="isOnlineB"
            style="margin-top: 2vh"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 2vh">
        <SecondBottom/>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import SecondLeft from './components/SecondLeft'
  import SecondRightTop from './components/SecondRightTop'
  import SecondRightBottom from './components/SecondRightBottom'
  import SecondMiddle from './components/SecondMiddle'
  import SecondBottom from './components/SecondBottom'
  import Navigation from '@c/Navigation/'
  import MapData from '@/config'
  import eChartsLocationData from '@/config/eChartsLocationData'

  export default {
    name: 'Home',
    data() {
      return {
        query: {
          user_level: null,
          user_code: ''
        },
        originalData: {
          data: [],
          range: [],
          isGroupUsers: false
        },
        range: [],
        dataList: [],
        provinceList: MapData.originProvinceList,
        localData: eChartsLocationData.eChartsLocationData,
        chartDataTop: {
          dataLine: [],
          dataY: []
        },
        chartDataBottom: {
          dataLine: [],
          dataY: []
        },
        online: 0,
        total: 0,
        isTotalB: false,
        isOnlineB: false
      }
    },
    components: {
      SecondLeft,
      SecondRightTop,
      SecondRightBottom,
      SecondMiddle,
      SecondBottom,
      Navigation
    },
    created() {
      this.$bus.$off('locationSelect')
      this.$bus.$on('locationSelect', this.repeatInFive)
    },
    mounted() {
      this.init()
    },
    // 离开页面结束循环
    beforeRouteLeave(to, from, next) {
      if (this.timer) {
        clearInterval(this.timer)
      }
      next()
    },
    methods: {
      init(){
        this.getQuery(window.location.search)
      },
      // Url中的参数转为Object
      getQuery(searchString) {
        let item = {}
        const args = searchString.length > 0 ? searchString.replace('?','').split('&') : '[]'
        for (let i of args ){
          item[i.split('=')[0]] = i.split('=')[1]
        }
        this.query = item
        this.$store.commit('setIsGroupUsers', this.query.user_level === '0')
        this.repeatInFive(this.query.user_code)
      },
      getStatistics(code) {
        window._api.apiStatistics({ code }).then(res => {
          if (res.state === 'ok') {
            // 保存code和name对应关系
            let codeAndName = []
            codeAndName = res.data.map(item => ({
              name: item.name,
              code: item.code
            }))
            this.$store.commit('setCurrentMapTwo', codeAndName)

            // 地图所需信息
            this.rangeMin = res.range[0]
            this.rangeMax = res.range[1]
            let arr = []
            this.chartDataName = this.provinceList.find(item => item.code === code).name
            arr = res.data.map(item => ({
              name: this.localData.find(i => i.code === item.code) ? this.localData.find(i => i.code === item.code).name : '',
              value: item.total
            }))
            this.chartDataDataList = arr
            this.$bus.$emit('mapInitSecond', this.chartDataDataList, this.chartDataName, this.rangeMin, this.rangeMax)

            // Middle
            let tmpData = []
            res.data.map(item => tmpData.push([item.name,item.total,item.online,`${item.percent}%`,`${item.offline}${item.offline ? '%' : ''}`, item.code]))
            this.dataList = tmpData

            // RightTop
            this.chartDataTop.dataLine = res.tList.map(item => item.num)
            this.chartDataTop.dataY = res.tList.map(item => item.day)
            if (res.total >= 10000) {
              this.total = res.total/10000
              this.isTotalB = true
            } else {
              this.isTotalB = false
              this.total = res.total
              this.isTotalB = false
            }

            // RightBottom
            this.chartDataBottom.dataLine = res.oList.map(item => item.num)
            this.chartDataBottom.dataY = res.oList.map(item => item.day)
            if (res.online >= 10000) {
              this.online = res.online/10000
              this.isOnlineB = true
            } else {
              this.isOnlineB = false
              this.online = res.online
              this.isOnlineB = false
            }
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      locationSelect(code) {
        this.$bus.$emit('provinceChangedSecond', code)
        this.$store.commit('setLocation', this.provinceList.find(item => item.code === code).name)
        this.getStatistics(code)
      },
      repeatInFive(code) {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.locationSelect(code)
        this.timer = setInterval(() => {
          this.locationSelect(code)
        }, 1000 * 60 * 5)
      }
    }
  }
</script>
<style scope>
  .commonHeader {
    display: flex;
    position: relative;
    height: 6vh;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    color: #ffffff;
    letter-spacing: 6px;
    margin-bottom: 2vh;
  }
  @media only screen and (min-width: 1921px) {
    .commonHeader {
      font-size: 32px;
    }
  }
  @media only screen and (max-width: 1920px) {
    .commonHeader {
      font-size: 32px;
    }
  }
  @media only screen and (max-width: 1600px) {
    .commonHeader {
      font-size: 28px;
    }
  }
  .containerWrap{
    position: relative;
    height: 100vh;
    background: url("../../assets/images/bg.jpg") scroll center no-repeat;
    background-size: 100% 100%;
  }
</style>

